import React from "react"
import Taro from "@tarojs/taro"
import clsx from "clsx"
import { Navigator, Text, View } from "@tarojs/components"
import { NavigatorProps } from "@tarojs/components/types/Navigator"
import { Arrow } from "@taroify/icons"

type IProps = {
  title: string
  titleClassName?: string
  /** 是否显示右边箭头，默认不显示, 显示时需要传navigatorLink */
  showArrow?: boolean
  moreText?: string
  navigatorLink?: string
  arrowColor?: React.CSSProperties["color"]
  arrowSize?: number
  openType?: keyof NavigatorProps.openType
}
const GpBlockTitle: React.FC<IProps> = (props: IProps) => {
  const {
    title,
    titleClassName,
    showArrow = false,
    moreText = "更多",
    arrowColor = "#b8b8bf",
    arrowSize = 18,
    navigatorLink,
    openType
  } = props
  const fontSize = Taro.pxTransform(arrowSize)
  return (
    <View className="flex flex-row justify-between items-center">
      <View className={clsx("yahei-bold font-bold text-36px text-hex-2c2c35", titleClassName)}>
        <Text>{title}</Text>
      </View>
      {showArrow && (
        <Navigator
          className="flex items-center"
          hoverClass="none"
          url={navigatorLink}
          openType={openType}
        >
          {moreText && (
            <Text className="yahei font-normal text-24px text-hex-b8b8bf">{moreText}</Text>
          )}
          <Arrow color={arrowColor} style={{ fontSize }} />
        </Navigator>
      )}
    </View>
  )
}
export default GpBlockTitle
